// 这就是路由的配置文件
// 路由就是页面和组件的对应关系 输入什么样的url可以看到什么样的页面 想看什么页面就要输入什么url
// SPA single Page app单页面应用 整个网站只有一个html
import Router from 'vue-router'
import Vue from 'vue'
// 使用中间件 
Vue.use(Router)

// 引入要展示的组件
// import Big from '../components/Big.vue'
// import Father from '../components/Father.vue'
// import HelloWorld from '../components/HelloWorld.vue'
// import Index from '../views/Index.vue'
// import Canshu from '../views/Canshu.vue'
// import List from '../views/List.vue'
// import Detail from '../views/Detail.vue'
// import Page from '../views/Page.vue'
// import Page1 from '../views/Page1.vue'
// import Page2 from '../views/Page2.vue'
// import Page3 from '../views/Page3.vue'
// import Right from '../components/Right.vue'
// import Right2 from '../components/Right2.vue'
// import Right3 from '../components/Right3.vue'
// import NotFound from '../components/NotFound.vue'

// 一下换成懒加载的方式 按需加载 减少首屏加载的代码量 提高速度
const Big = ()=> import('../components/Big.vue')
const Father = ()=> import('../components/Father.vue')
const HelloWorld = ()=> import('../components/HelloWorld.vue')
const Index = ()=> import('../views/Index.vue')
const Canshu = ()=> import('../views/Canshu.vue')
const List = ()=> import('../views/List.vue')
const Detail = ()=> import('../views/Detail.vue')
const Page = ()=> import('../views/Page.vue')
const Page1 = ()=> import('../views/Page1.vue')
const Page2 = ()=> import('../views/Page2.vue')
const Page3 = ()=> import('../views/Page3.vue')
const Right = ()=> import('../components/Right.vue')
const Right2 = ()=> import('../components/Right2.vue')
const Right3 = ()=> import('../components/Right3.vue')
const Buchong = ()=> import('../views/Buchong.vue')
const Ref = ()=> import('../views/Ref.vue')
const VuexCom = ()=> import('../views/VuexCom.vue')
const VuexCai = ()=> import('../views/VuexCai.vue')
const NotFound = ()=> import('../components/NotFound.vue')

// 核心！路由表 就是页面和url的对应关系 路由规则
// 前端路由  前端写好页面后确定url（合理）  后端路由 前端写页面后端定地址（不合理）
const routes = [
    // path 浏览器中的地址 component 要显示谁
    // components 命名视图 App中有两个或以上的router-view
    // url包含有path的地址
    // exact-active-class 只有url和path完全相同时才会激活，才会有class
    // {path: '/', redirect: '/page3'}, // 指定起始页
    { path: '/', component: Index, meta: { title: '首页' } },
    { path: '/canshu', component: Canshu },
    { path: '/vuex', component: VuexCom },
    { path: '/vuexcai', component: VuexCai },
    {
        path: '/big', component: Big, beforeEnter: (to, from, next) => {
            // 前置守卫
            console.log('单个路由独享的守卫', to, from);
            next()
        }
    },
    { path: '/list', name:'aaa', component: List, meta: { title: '歌单' } },
    // detail动态路由 路由的地址会变 渲染的页面和内容也会变 但是都是同一个组件Detail
    { path: '/detail/:name', component: Detail },
    { path: '/detail/:name', component: Detail },
    { path: '/ref', component: Ref },
    {
        path: '/page', component: Page, meta: { needLogin: true }, children: [
            // 里面是子路由 嵌套路由 完整的路由地址：父路由+子路由 中间有斜线分割
            // 如果子路由写了斜线 就要写完整的地址
            { path: '', component: Right, meta: { needLogin: true, title: 'son1' } }, // 默认的子路由
            { path: 'son2', component: Right2, meta: { needLogin: true } },
            { path: '/page/son3', component: Right3, meta: { needLogin: true } }
        ]
    },
    { path: '/page1', component: Page1, meta: { needLogin: true, title: 'page1' } },
    { path: '/page2', component: Page2, meta: { needLogin: true, title: 'page2' } },
    { path: '/page3', component: Page3, meta: { needLogin: true, title: 'page3' } },
    // 以上needLogin的页面需要登录后查看 别的页面 不管
    // name的使用场景：代替特别长长长长长的path
    { path: '/helloworld', name: 'hi', component: HelloWorld },
    { path: '/buchong', component: Buchong },
    // 404页面的处理方式1 *通配符 可以匹配所有的地址
    // {path: '*', component: NotFound},
    // 404页面的处理方式2 重定向 自动跳转页面 会将所有的错误地址跳转到一个指定地址去
    { path: '*', redirect: '/error' },
    { path: '/error', component: NotFound },
]

// 路由实例
const router = new Router({
    // 路由表
    routes: routes,
    // 路由模式  history 没有# hash有#（默认）
    mode: 'history',
    // 浏览器显示的前缀
    base: 'abc',
    // 滚动行为 进入页面时滚动到指定位置 用在很长的页面上
    // scrollBehavior(to, from, savedP) {
    //     console.log(to, from);
    //     if (savedP) {
    //         return savedPosition
    //     } else {
    //         return { x: 0, y: 100 }
    //     }
    // }
})
// router和route的区别
// router在整个项目中只有一个 路由实例是全局的(跳转时带上r)
// route有好多，组成了routes 路由对象是局部的(获取当前页面的信息不带r)

// 先得到路由实例router，再写全局守卫
// 有时候会单独抽离成一个js文件 用来控制权限 xxxxx.js
router.beforeEach((to, from, next) => {
    // to 要去的路由对象  from正在离开的老的路由对象
    document.title = to.meta.title || 'vue-练习';
    if (to.meta.needLogin) {
        // 这就是需要校验的几个页面
        console.log(22, JSON.parse(localStorage.getItem('isLogin')));
        if (JSON.parse(localStorage.getItem('isLogin'))) {
            // 已登录
            next() // 正常跳转
        } else {
            // 未登录，就去首页
            next('/')
        }
    } else {
        // 无需登录的页面
        next()
    }
    // next()// 将代码的执行权交给下一个中间件
})

export default router
